<template>
  <div class="container">

    <!-- 步骤一 - 输入 -->
    <div v-show="activeVisible(0)">
      <h3>步骤一 - 输入</h3>
      <el-input v-model="inputValue" placeholder="请输入病症描述"></el-input>
      <el-button type="primary" @click="nextStep" style="margin: 20px">下一步</el-button>
    </div>

    <!-- 步骤二 - 复选框 -->
    <div v-show="activeVisible(1)">
      <h3>步骤二 - 补充症状</h3>
      <el-checkbox-group v-model="selectedOptions">
        <el-checkbox label="头晕"></el-checkbox>
        <el-checkbox label="头疼"></el-checkbox>
        <el-checkbox label="腹泻"></el-checkbox>
        <el-checkbox label="发热"></el-checkbox>
        <el-checkbox label="流涕"></el-checkbox>
        <el-checkbox label="流泪"></el-checkbox>
        <el-checkbox label="身体乏力"></el-checkbox>
        <el-checkbox label="反应迟钝"></el-checkbox>
        <el-checkbox label="持续时间久"></el-checkbox>
      </el-checkbox-group>
      <el-button type="primary" @click="previousStep" style="margin: 20px">上一步</el-button>
      <el-button type="primary" @click="nextStep" style="margin: 20px">下一步</el-button>
    </div>

    <!-- 步骤三 - 输出 -->
    <div v-show="activeVisible(2)">
      <h3>步骤三 - 输出</h3>
      <el-collapse v-model="activeAccordion" class="accordion-item">
        <el-collapse-item
        v-for="(accordion,index) in pagedAccordionList"
        :key="index"
        :title="accordion.title"
        :name="accordion.name"
        >

          <el-descriptions
              :bordered="true"
              size="small"
              :column="1"
              direction="vertical"
              border
          >
            <el-descriptions-item label="简介"  width="100px" label-align="left">{{ accordion.part1 }}</el-descriptions-item>
            <el-descriptions-item label="别称"  width="100px" label-align="left">{{ accordion.part2 }}</el-descriptions-item>
            <el-descriptions-item label="是否医保"  width="100px" label-align="left">{{ accordion.part3 }}</el-descriptions-item>
            <el-descriptions-item label="是否传染"  width="100px" label-align="left">{{ accordion.part4 }}</el-descriptions-item>
            <el-descriptions-item label="相关人群"  width="100px" label-align="left">{{ accordion.part5 }}</el-descriptions-item>
            <el-descriptions-item label="治疗症状"  width="100px" label-align="left">{{ accordion.part6 }}</el-descriptions-item>
            <el-descriptions-item label="主治疗科室"  width="100px" label-align="left">{{ accordion.part7 }}</el-descriptions-item>
            <el-descriptions-item label="辅助治疗科室"  width="100px" label-align="left">{{ accordion.part8 }}</el-descriptions-item>
            <el-descriptions-item label="临床症状"  width="100px" label-align="left">{{ accordion.part9 }}</el-descriptions-item>
            <el-descriptions-item label="一般治疗方式"  width="100px" label-align="left">{{ accordion.part10 }}</el-descriptions-item>
            <el-descriptions-item label="详细治疗方式"  width="100px" label-align="left">{{ accordion.part11 }}</el-descriptions-item>

          </el-descriptions>

        </el-collapse-item>
      </el-collapse>
      <el-button type="primary" @click="previousStep" style="margin: 20px">上一步</el-button>
      <el-button type="primary" @click="resetStep" style="margin: 20px">重置</el-button>

      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="accordionList.length"
          layout="prev, pager, next"
          @current-change="handlePageChange"
      ></el-pagination>

    </div>



    <el-steps :active="activeStep" finish-status="success" align-center >
      <el-step title="输入" :icon="stepIcon(0)"></el-step>
      <el-step title="复选框" :icon="stepIcon(1)"></el-step>
      <el-step title="输出" :icon="stepIcon(2)"></el-step>
    </el-steps>


  </div>
</template>

<script>


export default {
  name: 'FlowPage',
  components: {
  },
  data() {
    return {
      activeStep: 0,
      inputValue: '',
      selectedOptions: [],
      pageSize:5,
      currentPage:1,
      activeAccordion:[],
      accordionList: [
        {
          id: 1,
          title: '水痘',
          part1: '水痘是一种传染性极强的儿童期出疹性疾病，与带状疱疹为同一病毒所引' +
              '起的两种不同表现的临床病症，水痘为原发感染。经过飞沫或接触传播，感染后可' +
              '获得持久的免疫力，' +
              '但以后可以发生带状疱疹。其临床表现为皮肤黏膜相继出现和同时存在斑疹、丘疹、' +
              '疱疹和结痂等各类皮疹，全身症状轻微。冬春季节多发。人群主要见于儿童，以2～6岁' +
              '为高峰，20岁以后' +
              '发病者占2%以下，孕妇分娩前6天患水痘可感染胎儿，出生后10天内发病。',
          part2: '水花，水疱',
          part3: '是',
          part4: '有传染性',
          part5: '所有人，大多是儿童',
          part6: '发烧水泡水痘结痂疱疹斑疹',
          part7: '传染科',
          part8: '皮肤科',
          part9: '水痘症状典型症状：婴幼儿常无早期症状。年长儿或成人可有发热头痛、全身不适、纳差及上呼吸道症状，1～2日后才出疹。偶可出现前驱疹。相关症状：发烧水泡' +
              '水痘结痂一、水痘症状：1、潜伏期：潜伏期约为12～21天，平均14天;2.早期症状：婴幼儿常无早期症状。年长儿或成人可有发热头痛、全身不适、纳差及上呼吸道症状，' +
              '1～2日后才出疹。偶可出现前驱疹。3.出疹期：发热同时或1～2天后出疹，具有以下特点：(1)皮疹数量较多，数百至数千个不等。(2)先见于躯干、头部，后延及全身。其分布呈' +
              '向心性，以发际、胸背较多，四肢面部较少，手掌足底偶见。鼻、咽、口腔、外阴等部位的黏膜亦可发疹。(3)皮疹常呈椭园形，3～5mm，周围有红晕，疱疹浅表易破。皮疹发展迅速，' +
              '开始为红斑疹，数小时内变为丘疹，再形成疱疹，疱疹时感皮肤搔痒，然后干结成痂，此过程有时只需6～8小时，如无感染，1～2周后痂皮脱落，一般不留瘢痕。(4)皮疹分批出现，同一部' +
              '位可见斑疹、丘疹、疱疹和结痂同时存在。(5)形成非典水痘当存在免疫功能缺陷、凝血机制障碍及继发感染等原因时，常形成非典型水痘。皮疹融合者为大疱型，直径可达2～7cm，易继发' +
              '金葡菌感染和脓毒血症而死亡;疱疹呈出血性，皮下、粘膜有瘀斑为出血型，可伴有身体其他部位的出血;皮肤大片坏死，全身中毒症状严重者称为坏死型;病变播散累及内脏者称为播散型，' +
              '多见于免疫功能低下的患者。(6)妊娠头三个月内感染水痘，可导致胎儿先天性畸形，称为先天性水痘综合症。二、分类：根据患者的临床特点，可将水痘划分为如下类型1、普通型：占水痘患' +
              '者的绝大多数，全身症状相对较轻微。病程经历约1周，即可自愈。成人及婴儿患者出疹往往较多，病情也较重，病程可迁延数周。2.进行性播散型水痘。：罹患白血病、淋巴瘤等恶性肿瘤，或长' +
              '期应用各种免疫抑制剂、肾上腺皮质激素的等因为各种原因导致抵抗力下降者，受染后易于发展为进行性播散型水痘。3.水痘肺炎：患者多为成人，出现于第1病日至第6病日，但病情轻重不一。' +
              '轻者无明显症状;重症可有高热、咳嗽、胸痛、咯血、呼吸困难及发绀。胸部体征不明显。水痘肺炎的病理过程大体上与皮疹同步，常随皮疹消退而好转。4.水痘脑炎：较少见，出现出疹后3～8天发' +
              '生脑炎的临床表现，亦有少数见于出疹前2周至出疹后3周。一般为5～7岁幼儿，男多于女。临床特征和脑脊液检查特点与其他病毒性脑炎相似。起病缓急不一，早期可无发热及脑膜刺激征，常见头痛、' +
              '呕吐及感觉异常，或伴有共济失调、眼球震颤、眩晕及语言障碍等小脑症状;严重者可有惊厥、瘫痪、昏睡或昏迷。病后可有精神异常，智力迟钝及癫痫发作等后遗症。5.重症水痘感染：可导致肝组织灶性坏' +
              '死，肝细胞及胆管上皮细胞内有典型的核内包涵体，临床表现为水痘肝炎，患者出现肝脏肿大、肝功能异常，可伴有黄疸。水痘并发肾炎、间质性心肌炎等亦有报告，严重的心律失常可致患者猝然死亡。' +
              '6.妊娠合并感染水痘：可能引起胎儿畸形;妊娠后期感染水痘，可能引起胎儿先天性水痘综合征。',
          part10: '一般治疗、抗病毒治疗、免疫制剂、并发症治疗',
          part11: '水痘诊疗知识 就诊科室： 传染科 皮肤科 治疗费用：  市三甲医院约（100-500元）治愈率： 治疗周期： 治疗方法：' +
              '一般治疗、抗病毒治疗、免疫制剂、并发症治疗  水痘一般治疗 　　水痘西医治疗(1)应予适当护理特别重视皮肤清洁，避免细菌污染水痘破损处，避免' +
              '手抓疱疹，防止继发感染。局部痒感不适时可用炉甘石洗剂外涂，疱疹破碎后宜用1%甲紫(龙胆紫)或抗生素软膏。　　(2)高热时可用退热剂，但应尽量' +
              '避免用水杨酸制剂(如阿司匹林)。青少年患者可口服阿昔洛韦800mg/次，5次/d，服用5～7天;伐昔洛韦(万乃洛韦)300mg，2次/d，7' +
              '天;或喷昔洛韦50mg，每8h1次，7天。对阿昔洛韦耐药者可用膦甲酸400mg/(kg·d)静脉点滴，每8h1次，直至治愈。对重症大疱型出血' +
              '型、坏疽型新生儿水痘，亦可早期静脉滴阿昔洛韦(无环鸟苷)、阿糖腺苷、干扰素等。　　(3)瘙痒甚可用抗组氨药物如扑尔敏片4mg/次，3次/日;' +
              '赛庚啶片，4mg/次，3次/日。　　(4)继发感染时应用抗菌素如：麦地霉素或螺旋霉素等口服。　　(5)重症患者可肌注丙种球蛋白3～6m1，1' +
              '次/日，连用3～5次。　　(6)继发感染者外用脓疱疹泥膏、汗疱泥膏或莫匹罗星(百多邦)软膏。　　(7)水痘性角膜炎可用0.1%碘苷(疱疹净)' +
              '眼药水或利巴韦林(病毒唑)。水痘辨证论治 　　水痘中医治疗一、中医治则法　　宜清热疏风、凉血、除湿解毒。　　(1)桑菊饮：桑叶10g，菊花6' +
              'g，牛蒡子10g，杏仁10g，板蓝根30g，银花10g，连翘6g，苡仁10g，车前子(包)10g，芦根10g。水煎，每日1剂，分2次服。　　' +
              '(2)黄连解毒汤合清营汤：黄连6g，黄芩6g，黄柏5g，栀子5g，生地10g，玄参4g，竹叶10g，银花10g，连翘10g，丹参6g，麦冬6' +
              'g。水煎，每日1剂，分2次服　　二、外治法　　1.三黄擦剂外用，每日3次。　　2.糜烂化脓者用青黛膏，外用每日3次。　　3.口腔粘膜溃烂者用' +
              '青吹口散外吹，每日3次。　　4.如意金黄散30g，化毒散1.5g，百部酒100g。混匀外涂，每日3次。',

        },
      ]
    };
  },
  methods: {
    activeVisible(step) {
      return this.activeStep === step;
    },
    nextStep() {
      if (this.activeStep < 2) {
        this.activeStep++;
      } else {
        // 执行最后一步的逻辑，例如生成输出结果等
      }
    },
    resetStep() {
      this.activeStep = 0;
      this.inputValue = '';
      this.selectedOptions = [];
      this.activeAccordion = ['accordion1'];
    },
    stepIcon(index) {
      if (index === 0) {
        return 'Search'; // 输入步骤的图标
      } else if (index === 1) {
        return 'Pointer'; // 复选框步骤的图标
      } else if (index === 2) {
        return 'Document'; // 输出步骤的图标
      }
    },

    previousStep(){
      this.activeStep--;
      this.activeAccordion = [];
      if (this.activeStep < 0) {
        this.activeStep = 0;
      }
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.activeAccordion = [];
    }

  },
  computed: {
    pagedAccordionList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.accordionList.slice(start, end);
    }
  },
}
</script>

<style scoped>
.container {
  margin: 20px;
}

.el-steps{
  margin:80px;
}

.el-input{
  margin: 20px;
}

.el-checkbox{
  margin: 20px;
}
.accordion-item .el-collapse-item__header{
  font-size: 20px;
}
</style>

